<template>
  <div class="bg_f2" style="height:100%">

    <div class="ub cHeadr bg_w wd_100">
      <div class="ub ub-ac ub-pc">日</div>
      <div class="ub ub-ac ub-pc pur">一</div>
      <div class="ub ub-ac ub-pc pur">二</div>
      <div class="ub ub-ac ub-pc pur">三</div>
      <div class="ub ub-ac ub-pc pur">四</div>
      <div class="ub ub-ac ub-pc pur">五</div>
      <div class="ub ub-ac ub-pc">六</div>
    </div>
    <scroller :on-refresh="refresh" :on-infinite="infinite" ref="calscroller">
      <div class="ub calendar ub-ver">
        <div class="ub ub-ver">
          <!--第一个月-->
          <div class="pad_05 ub ub-ac ub-pc">{{curYear}}年{{curmonth+1}}月</div>
          <div class="days bg_w clearfix">
            <div class="one" v-for="(item, index) in curArr" :class="{grey:(item < curDay),today:(item === curDay)}" :key="curYear + '-' + (curmonth+1) + '-' + item" @click="selClc(curYear ,(curmonth+1) ,item)">
              <div class="ub ub-ac ub-pc" style="width:100%;height:100%">
                <div :class="{nextDay:(curYear === selDate.year && (curmonth+1)=== selDate.month && item === selDate.date)}" v-show="item!=0">
                  {{item}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ub ub-ver" v-for="(drawObj, k) in drawArr">
          <!--第二个月及以后-->
          <div class="pad_05 ub ub-ac ub-pc">{{drawObj.year}}年{{drawObj.month+1}}月</div>
          <div class="days bg_w clearfix">
            <div class="one" v-for="(item, index) in drawObj.arr" :key="drawObj.year + '-' + (drawObj.month+1) + '-' + item" @click="selClc(drawObj.year , (drawObj.month+1) ,item)">
              <div class="ub ub-ac ub-pc" style="width:100%;height:100%">
                <div :class="{nextDay:(drawObj.year === selDate.year && (drawObj.month+1) === selDate.month && item === selDate.date)}" v-show="item != 0">
                  {{item}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </scroller>

  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
const now = new Date();
const year = now.getFullYear();
const curmonth = now.getMonth();
const day = now.getDate();
// const curmonth = 9;
// const day = 31;
// const isLeap = (year % 400 === 0) ? 1 : ((year % 100 === 0) ? 0 : (year % 4 === 0 ? 1 : 0));
// console.log(isLeap);
const monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
const leapmonthDays = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// const DrawTimes = 3;
// console.log(monthDays);

export default {
  name: 'calendar',
  created: function () {
    this.$store.commit('changeHeader', {
      left: '关闭',
      right: '',
      middle: '选择日期',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'closeIcon',
      rightAction: '',
      rightIcon: ''
    });
    let calendar = this.calendar;
    if (!calendar.hasValue) {
      this.$store.commit('initSelDay');
    }
    this.selDate.year = calendar.year;
    this.selDate.month = calendar.month;
    this.selDate.date = calendar.date;
    this.ctlDrawArr(2);
  },
  data: function () {
    return {
      curYear: year,
      curmonth: curmonth,
      curDay: day,
      curArr: this.getArr(year, curmonth),
      lastYear: year, // 当前计算到哪一年
      lastmonth: curmonth, // 当前计算到哪一个月
      drawArr: [], // 除第一个月外的所有draw数组
      selDate: {
        year: '',
        month: '',
        date: ''
      }
    }
  },
  methods: {
    isLeap: function (year) {
      return (year % 400 === 0) ? 1 : ((year % 100 === 0) ? 0 : (year % 4 === 0 ? 1 : 0));
    },
    cutmonth: function (month) {
      return month > 11 ? (month - 12) : month;
    },
    getArr: function (year, month) {
      // let cutmonth = this.cutmonth(month);
      let days = new Date(year, month, 1).getDay(); // 获取每月第一天是周几
      let isLeap = this.isLeap(year);
      // if (cutmonth === 1 && cutmonth !== month && (this.isLeap(year + 1) === 1)) { // 跨年后为闰年的2月
      //   monthLoop = 29;
      // }
      console.log(days);
      let monthLoop = (isLeap ? leapmonthDays : monthDays)[month]; // 获取当月天数
      let arr = [];
      for (let i = 0; i < days; i++) {
        arr.push(0);
      }
      for (let i = 0; i < monthLoop; i++) {
        arr.push(i + 1);
      }
      console.log(arr);
      return arr;
    },
    ctlDrawArr: function (num) { // 注入数组
      while (num > 0) {
        this.lastmonth++;
        if (this.lastmonth > 11) { // 跨年
          this.lastmonth -= 12;
          this.lastYear++;
        }
        let monthArr = this.getArr(this.lastYear, this.lastmonth);// 获取数组
        let obj = {
          year: this.lastYear,
          month: this.lastmonth,
          arr: monthArr
        }
        this.drawArr.push(obj);
        num--;
      }
    },
    selClc: function (year, month, date) {
      console.log(year)
      console.log(month)
      console.log(date)
      console.log(year + '-' + month + '-' + date);
      if (date === 0) {
        return false;
      }
      console.log('go');
      if (year === this.curYear && month === (this.curmonth + 1) && date < this.curDay) {
        this.$store.dispatch('showTx', { text: '您选择的日期无效' });
        return false;
      }
      this.selDate.year = year;
      this.selDate.month = month;
      this.selDate.date = date;
      this.$store.commit('setSelDay', { year, month, date });
      this.$router.push('/flights')
    },
    infinite: function () {
      // console.log('infinite');
      this.ctlDrawArr(2)
      // this.$refs.calscroller.finishInfinite(true);
    },
    refresh: function () {
      this.$refs.calscroller.finishPullToRefresh()
      // console.log('refresh');
    }
  },
  computed: mapState(['calendar'])
}
</script>
 
<style lang="stylus">
@import '../../stylus/base.styl';
.cHeadr
  position: fixed;
  z-index: 200;
  top: f_times(2.5);
  height: f_times(2);
  width: 100%;
  >div
    width: 14.28571428571429%;
  >.pur
    color: #8d4ba0;
.calendar
  margin-top: f_times(2);
  .days
    // margin: f_times(1) auto;
    >.one
      float: left;
      width: 14.28571428571429%;
      vertical-align: center;
      text-align: center;
      height: f_times(4);
      line-height: f_times(4);
    >.grey
      color: #ccc;
    >.today
      color: #8d4ba0;
      position: relative;
      top: f_times(-0.4);
      &:after
        content: '今天';
        font-size: f_times(0.3);
        position: absolute;
        width: f_times(2);
        height: f_times(2);
        top: f_times(1);
        left: f_times(0.6);
    .nextDay
      border-radius: 50%;
      color: #fff;
      background-color: $bgCol;
      width: f_times(3);
      height: f_times(3);
      line-height: f_times(3);
</style>